<template>
    <div style="width: 1400px; height: 460px; background: white; box-shadow: 0px 3px 20px rgba(138, 149, 158, 0.12); border-radius: 12px">
        <!-- 左侧分类 -->
        <div style="display: flex; flex-direction: column; width: 300px; padding: 20px;">
            <div style="font-size: 17px; font-weight: bold; margin-bottom: 10px;">建工类</div>
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                <div v-for="(item, index) in jianGongList" :key="index" style="flex: 1 1 100px; text-align: center;">
                    {{ item }}
                </div>
            </div>

            <div style="font-size: 17px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">财会金融类</div>
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                <div v-for="(item, index) in caiHuiList" :key="index" style="flex: 1 1 100px; text-align: center;">
                    {{ item }}
                </div>
            </div>

            <div style="font-size: 17px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">职业考试</div>
            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                <div v-for="(item, index) in zhiYeList" :key="index" style="flex: 1 1 100px; text-align: center;">
                    {{ item }}
                </div>
            </div>
        </div>

        <!-- 右侧图片区域 -->
        <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
            <img src="https://placehold.co/1081x509" alt="placeholder image" style="max-width: 100%; max-height: 100%;">
        </div>

        <!-- 底部卡片区域 -->
        <div style="display: flex; justify-content: space-around; padding: 20px;">
            <div style="text-align: center;">
                <img src="https://placehold.co/61x61" alt="课程图标">
                <div style="font-size: 16px; font-weight: bold; margin-top: 5px;">课程</div>
                <div style="color: #888; font-size: 14px; margin-top: 5px;">大数据智能学习系统</div>
            </div>
            <div style="text-align: center;">
                <img src="https://placehold.co/63x63" alt="题库图标">
                <div style="font-size: 16px; font-weight: bold; margin-top: 5px;">题库</div>
                <div style="color: #888; font-size: 14px; margin-top: 5px;">智能学习平台、高效通关</div>
            </div>
            <div style="text-align: center;">
                <img src="https://placehold.co/75x75" alt="资料图标">
                <div style="font-size: 16px; font-weight: bold; margin-top: 5px;">资料</div>
                <div style="color: #888; font-size: 14px; margin-top: 5px;">《蓝宝典》《黄金考点》现货售卖！</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            jianGongList: [
                '一级建造师', '二级建造师', '一级消防工程师',
                '一级造价工程师', '注册安全工程师', '监理工程师',
                '消防设施操作员'
            ],
            caiHuiList: [
                '经济师', '中级经济师', '初级经济师', '高级经济师',
                '初级会计师', '中级会计师', '注册会计师', '税务师',
                '初级银行从业', '中级银行从业'
            ],
            zhiYeList: [
                '初级社会工作者', '中级社会工作者'
            ]
        };
    }
};
</script>

<style scoped>
/* 添加必要的样式 */
</style>